{template 'header'}
<style type="text/css">
    body {
        background: white;
    }

    /*谷歌*/
    ::-webkit-input-placeholder {
        font-size: 15px;
    }

    /*火狐*/
    ::-moz-placeholder {
        font-size: 15px;
    }

    /*IE*/
    ::-ms-input-placeholder {
        font-size: 15px;
    }

    .lists {
        width: 90%;
        margin: 0 auto;
        margin-top: 20px;
        border: 1px solid #c8c7cc;
    }

    .lists_title {
        height: 30px;
        line-height: 30px;
        color: red;
        background: #c8c7cc;
        margin: 0;
    }

    label {
        font-size: 15px;
    }

    .mui-input-row label {
        width: 40%;
        padding: 11px 10px;
    }

    .mui-input-row label ~ input, .mui-input-row label ~ select, .mui-input-row label ~ textarea {
        width: 60%;
    }

    .mui-input-group .mui-input-row:after {
        left: 0;
    }

    .mui-btn {
        display: block;
        width: 90%;
        background: red;
        margin: 0 auto;
        margin-top: 35px;
        color: white;
    }
</style>
</head>

<body>
<div class="mui-content" style="background: white;">
    <div class="lists">
        <h5 class="lists_title">*请认真填写信息</h5>
        <div class="mui-input-group" id="input_example">
            <div class="mui-input-row">
                <label>会员电话：</label>
                <input type="text" class="mui-input-clear" placeholder="请输入会员电话" readonly="readonly">
            </div>
            <div class="mui-input-row">
                <label>会员姓名：</label>
                <input type="text" class="mui-input-clear" placeholder="请输入会员姓名">
            </div>
            <div class="mui-input-row">
                <label>身份证号：</label>
                <input type="number" class="mui-input-clear" placeholder="请输入身份证号">
            </div>
            <div class="mui-input-row">
                <label>支付宝账号：</label>
                <input type="number" class="mui-input-clear" placeholder="请输入支付宝账号">
            </div>
            <div class="mui-input-row">
                <label>支付宝姓名：</label>
                <input type="text" class="mui-input-clear" placeholder="请输入支付宝姓名">
            </div>
            <div class="mui-input-row">
                <label>银行卡号：</label>
                <input type="number" class="mui-input-clear" placeholder="请输入银行卡号">
            </div>
            <div class="mui-input-row">
                <label>银行卡姓名：</label>
                <input type="text" class="mui-input-clear" placeholder="请输入银行卡姓名">
            </div>
            <div class="mui-input-row">
                <label>开户行：</label>
                <input type="text" class="mui-input-clear" placeholder="请输入开户行">
            </div>
        </div>
    </div>
    <button type="button" class="mui-btn" onclick="tijiao()">确认</button>

</div>


<script src="{MODULE_URL}assets/js/mui.min.js"></script>
<script src="{MODULE_URL}assets/js/jquery.min.js"></script>
<script type="text/javascript">
    mui.init({})


    mui.ready(function () {

    })


    function tijiao() {
        var check = true;
        mui("#input_example input").each(function () {
            //若当前input为空，则alert提醒
            if (!this.value || this.value.trim() == "") {
                var label = this.previousElementSibling;
                mui.alert(label.innerText + "不允许为空");
                check = false;
                return false;
            }
        });
        if (check) {
            mui.alert('验证通过!')
        }
    }


</script>
</body>

</html>